<template>
<view>
    <!-- 住宅抵押  -->
    <commonWin> </commonWin>
  <view class="top tac fw">
    <text>请完善</text>
    <text class="color">基本信息</text>
  </view>

    <!-- 你的内容 -->
<!--    <view class="messageBar fz12">-->
<!--      <view class="disb aic">-->
<!--        <view class="select disp aic" style="font-weight: 700;width: 100%">-->
<!--          <u-search placeholder="请输入小区名字等关键字" bgColor="#ffffff" v-model="house.cellName" @custom="searchHistory"></u-search>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->

		<view class="messageBar fz12">
			<view class="disb aic" @click="click(2)">
				<text>房产所在区域</text>
				<view class="select disp aic" style="font-weight: 700">
					<text class="color10">{{house.area?house.area:'请选择'}}</text>
					<image src="../../static/images/preat/right.png" mode=""></image>
				</view>
			</view>
		</view>

    <view class="messageBar fz12">
      <view class="disb aic">
        <text>小区名字</text>
        <view class="select disp aic" style="font-weight: 700;">
          <u-input
              placeholder="请输入"
              inputAlign='right'
              border='none'
              @input="onInput"
              v-model="keyword"
          ></u-input>
        </view>
      </view>
    </view>


    <u-transition :show="seacrhFlag" mode="fade">
    <view class="seacrh" v-if="seacrhFlag">
      <view class="seacrhList" v-for="(item, index) in seacrhList" :key="index" @click="selClick(item.area,item.cellName)">
        <image style="width:16px;height: 16px;margin-left: 5px;" :src="urls+'/minis/search/zb.png'" mode=""></image>
        <span style="position:absolute;margin-left: 20px;margin-bottom: 2px" v-html="brightenKeyword(item.area,item.cellName,editKeyword)">
        </span>
      </view>
    </view>
    </u-transition>


    <view class="messageBar fz12">
      <view class="disb aic" @click="click(1)">
        <text>所有权</text>
        <view class="select disp aic" style="font-weight: 700">
          <text class="color10">{{house.ownership?house.ownership:'请选择'}}</text>
          <image src="../../static/images/preat/right.png" mode=""></image>
        </view>
      </view>
    </view>


		<view class="messageBar fz12">
			<view class="disb aic" @click="click(3)">
				<text>房屋结构</text>
				<view class="select disp aic" style="font-weight: 700">
					<text class="color10">{{house.buildingStructure?house.buildingStructure:'请选择'}}</text>
					<image src="../../static/images/preat/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="messageBar fz12">
			<view class="disb aic" @click="click(4)">
				<text>土地性质</text>
				<view class="select disp aic" style="font-weight: 700">
					<text class="color10">{{house.landTypes?house.landTypes:'请选择'}}</text>
					<image src="../../static/images/preat/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="messageBar fz12">
			<view class="disb aic" @click="click(5)">
				<text>房屋类型</text>
				<view class="select disp aic" style="font-weight: 700">
					<text class="color10">{{house.houseType?house.houseType:'请选择'}}</text>
					<image src="../../static/images/preat/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="messageBar fz12">
			<view class="disb aic">
				<text>建筑面积</text>
				<view class="select disp aic" style="font-weight: 700">
					<u-input
              maxlength="12"
              type='digit'
					    placeholder="请输入"
						  inputAlign='right'
						  border='none'
					    v-model="house.areaOfStructure"
					></u-input>
          <text>㎡</text>
				</view>
			</view>
		</view>
		<u-picker :show="show" :immediateChange="true" :columns="list" keyName="category" @confirm="sexSelect" @cancel='show=false' closeOnClickOverlay  @close='show=false'></u-picker>

    <view style="margin-top: 20%"></view>

    <view class="upBtn tac colorf" @click="toSee">提交</view>

    <view class="overlay" v-if="seacrhFlag" @click="hideForm"></view>

	</view>



</template>

<script>
import {
  getResidentialMortgage,
  setResidentialMortgage,
  upDateResidentialMortgage,
  getZonePriceListByAreaAndName
} from "../../api/information.js"
  import config from '@/common/config'
  import commonWin from "./commonWin.vue";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image.vue";
import UText from "../../uni_modules/uview-ui/components/u-text/u-text.vue";
	export default {
		name:"informtionList",
    components: {UText, UImage, commonWin},
		props:{
      flag:{
        type:Boolean,
        default:()=>{return false}
      },
      pid:{
        type:String,
        default:()=>{return ''}
      },
			isThis:{
				type:Number,
				default:()=>{return ''}
			},
      ui:{
        type:String,
        default:()=>{return "0"}
      },
			listId:{
				type:String,
				default:()=>{return ''}
			}
		},
		data() {
			return {
				show:false,
        loading: false,
				select:null,
        seacrhFlag:false,
        keyword: '', //搜索的文字
        editKeyword: '', //做匹配的文字（这个一定要，不能用‘keyword’变量，不然会有问题）
        seacrhList: [], //搜索的结果
        urls:config.baseImgUrl,
				house:{
					userId:uni.getStorageSync('userInfo').id,
					ownership:'',
					area:'',
					buildingStructure:'',
					landTypes:'',
					cellName:'',
					areaOfStructure:'',
					houseType:'',
				},
				list:[]
			};
		},
		onReady() {
			if(this.isThis==15){
				if(this.listId){
					this.getMessage()
				}
			}
		},
		methods:{
			// 获取是否填写保单资料
			getMessage(){
				getResidentialMortgage({id:this.listId,ui:this.ui}).then(res => {
					this.house = res.data
          this.keyword = res.data.cellName
				})
			},
      onInput(v){
        if (this.keyword==null || this.keyword==''){
          this.seacrhFlag = false
        }else {

          this.editKeyword = this.keyword
          //调用接口
          getZonePriceListByAreaAndName({area:this.house.area,name:this.keyword}).then(res => {
            this.seacrhList = res.data
            if (this.seacrhList.length>0){
              this.seacrhFlag = true
            }else {
              this.seacrhFlag = false
            }
          })

        }
      },
      brightenKeyword(area,name, editKeyword ) {
        const Reg = new RegExp(editKeyword);
        name = area +'-'+ name
        if (name) {
          const res = name.replace(Reg, `<span style="color: #D7311E;"> ${editKeyword }</span>`);
          return res;
        }
      },
      selClick(area,name){
        this.house.area = area
        this.keyword = name
        this.house.cellName = name
        this.seacrhFlag = false
      },
      // 隐藏表单
      hideForm() {
        this.seacrhFlag = false;
      },
			//提交
			toSee(){
				if(this.listId){
					this.house.id = this.listId
          this.house.cellName = this.keyword
          uni.$u.toast('资料提交中...')
					upDateResidentialMortgage(this.house).then(res => {
						if(res.code==0){
							uni.$u.toast('保存成功')
							setTimeout(()=>{
                uni.navigateBack()
							},500)
						}else{
							uni.$u.toast(res.msg)
						}
					})
				}else{
          this.house.cellName = this.keyword
          uni.$u.toast('资料提交中...')
					setResidentialMortgage(this.house).then(res => {
						if(res.code==0){
              if (this.flag){
                uni.navigateTo({
                  url:`/pages/category/testLimit?id=&type=1&tableId=0`
                })
              }else {
                uni.navigateTo({
                  url:`/pages/category/testLimit?id=${this.pid}&type=0&tableId=`+res.data
                })
              }
						}else{
							uni.$u.toast(res.msg)
						}
					})
				}
			},
			//选择
			click(i){
				this.show = true
				this.select = i
				if(i==1){
					this.list = [['本人独有','他人所有','他人共有']]
				}
				if(i==2){
					this.list = [['渝中','江北','渝北','南岸','九龙坡','沙坪坝','大渡口','巴南','北碚','璧山','永川','江津','綦江','南川','垫江','涪陵','长寿','合川','铜梁','大足','潼南','荣昌','武隆','彭水','酉阳','秀山','黔江','石柱','忠县','梁平','万州','开州','云阳','奉节','城口','巫溪','巫山']]
				}
				if(i==3){
					this.list = [['钢筋混凝土结构','混合结构']]
				}
				if(i==4){
					this.list = [['出让地','划拨地']]
				}
				if(i==5){
					this.list = [['住宅','洋房','别墅','楼梯房']]
				}
			},
			//确认选择
			sexSelect(e){
				this.show = false
				if(this.select==1){
					this.house.ownership = e.value[0]
				}
				if(this.select==2){
					this.house.area = e.value[0]
				}
				if(this.select==3){
					this.house.buildingStructure = e.value[0]
				}
				if(this.select==4){
					this.house.landTypes = e.value[0]
				}
				if(this.select==5){
					this.house.houseType = e.value[0]
				}
        if(this.select==6){
          //this.house.houseType = e.value[0]
        }
			}
		}
	}
</script>

<style lang="scss">
.top{
	line-height: 80rpx;
	background-color: #eaf3ff;
}
.messageBar{
	min-height: 80rpx;
	line-height: 80rpx;
	padding: 0 30rpx;
	margin-bottom: 10rpx;
	background-color: #fff;
	.select{
		image{
			width: 20rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	}
}
.upBtn{
	width: 80%;
	line-height: 80rpx;
	border-radius: 40rpx;
	background-color: #0055ff;
	margin: 40rpx auto 20rpx;
}

.seacrh{
  width: 90%;
  height: 280px; /* 设置一个固定高度 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  border-radius: 7px;
  margin: 0 5%;
  z-index: 9999;
  position: fixed;
  background: white;
  box-shadow: 0 0 20rpx 3rpx #ccc;
}

.seacrhList {
  margin-top: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #e9ecf9;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  //background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
}


::v-deep ::-webkit-scrollbar {
  // 滚动条整体样式
  display: block;
  width: 10rpx !important;
  height: 10rpx !important;
  -webkit-appearance: auto !important;
  background: transparent;
  overflow: auto !important;
}

::v-deep ::-webkit-scrollbar-thumb {
  // 滚动条里面小方块
  border-radius: 10rpx !important;
  box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
  background-color: #E2E2E2 !important;
}

::v-deep ::-webkit-scrollbar-track {
  // 滚动条
  border-radius: 10rpx !important;
  box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
  background-color: #ededed !important;
}



</style>